<style scoped>
  .layout {
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;

  }

  .layout-header-bar {
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
  }

  .layout li {
    padding: 0 !important
  }

  .layout li a {
    color: #fff;
    display: inline-block;
    width: 100%;
    padding: 14px 0 14px 43PX
  }

  .layout li .active {
    color: red
  }

</style>
<template>
  <div class="layout">
    <Sider :style="{position: 'fixed', height: '100vh', left: 0}">
      <Menu active-name="1-1" theme="dark" width="auto" :open-names="['1']">
        <Submenu name="1">
          <template slot="title">
            <Icon type="ios-navigate"></Icon>
            Item 1
          </template>
          <MenuItem name="1-1">
          <router-link to='/' active-class='active' exact>首页</router-link>
          </MenuItem>
          <MenuItem name="1-2">
          <router-link to='/user' active-class='active'>用户管理</router-link>
          </MenuItem>
          <MenuItem name="1-3">
          <router-link to='/sort' active-class='active'>分类管理</router-link>
          </MenuItem>
          <MenuItem name="1-4">

          <router-link to='/news' active-class='active'>新闻管理</router-link>
          </MenuItem>
          <MenuItem name="1-5">

          <router-link to='/comment' active-class='active'>评论管理</router-link>
          </MenuItem>

        </Submenu>
        <Submenu name="2">
          <template slot="title">
            <Icon type="ios-keypad"></Icon>
            Item 2
          </template>
          <router-link to='/' active-class='active' exact>首页</router-link>

        </Submenu>
        <Submenu name="3">
          <template slot="title">
            <Icon type="ios-analytics"></Icon>
            Item 3
          </template>
          <router-link to='/' active-class='active' exact>首页</router-link>

        </Submenu>
      </Menu>
    </Sider>
    <Layout :style="{marginLeft: '200px'}">
      <Content :style="{padding: '0 16px 16px'}">
        <Breadcrumb :style="{margin: '16px 0'}">
          <BreadcrumbItem>Home</BreadcrumbItem>
          <BreadcrumbItem>Components</BreadcrumbItem>
          <BreadcrumbItem>Layout</BreadcrumbItem>
        </Breadcrumb>
        <Card>
          <div  >
            <router-view v-if='isRouterAlive'></router-view>
          </div>
        </Card>
      </Content>
    </Layout>
  </div>
</template>
<script>
  export default {
    provide() {
      return {
        reload: this.reload
      }
    },
    data() {
      return {
        isRouterAlive: true
      }
    },
    methods: {
      reload() {
        this.isRouterAlive = false
        this.$nextTick(function () {
          this.isRouterAlive = true
        })
      }
    }
  }

</script>
